<template>
  <div class="page">
    <div class="main">
      <div class="logo">
        <image src="/static/logo.png" model="widthFix" />
      </div>
      <div class="app-name">Demo</div>
      <div class="tips">绑定手机号能享受更多权益哦</div>

      user:{{ user }}

      <div class="footer">
        <button class="btn-login btn" @click="handleLogin">立即登录</button>
        <navigator open-type="navigateBack" class="btn-back btn">暂不登录</navigator>
      </div>
    </div>

    <div class="app-popup bind-mobile" v-if="showBindMobile">
      <div class="app-popup-content">
        <div class="icon">
          <image src="/static/auth-login/mobile.png" mode="widthFix" />
        </div>
        <div class="title">您还没有绑定您的手机号</div>
        <button class="btn-bind-mobile app-button app-button-primary app-button-large" open-type="getPhoneNumber" @getphonenumber="handleConfirmBindMobile">微信手机号快捷绑定</button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import { useUseStore } from '@/stores/user'
import wechatMiniApi from '@/api/wechat-mini'
import { message } from '@/utils/ui'

const user = ref('')
const useStore = useUseStore()

// 获取用户基本信息
const getUserProfile = () => {
  return new Promise((resove, reject) => {
    wx.getUserProfile({
      desc: '用于完善会员资料',
      success: (res) => {
        console.log('res.userInfo', res.userInfo)
        resove(res.userInfo)
      },
      fail(e) {
        console.error('授权失败', e)
        reject('授权失败')
      },
    })
  })
}

// 获取JSCDOE，去后端登录
const getCode = () => {
  return new Promise((resove, reject) => {
    uni.login({
      provider: 'oauth', // 使用微信登录
      success(res) {
        resove(res.code)
      },
      fail(e) {
        console.error('登录失败', e)
        reject('登录失败')
      },
    })
  })
}

const login = (jsCode) => {
  return wechatMiniApi.login({
    jsCode,
    nickname: '微信用户',
    avatar: 'https://thirdwx.qlogo.cn/mmopen/vi_32/POgEwh4mIHO4nibH0KlMECNjjGxQUq24ZEaGT4poC6icRiccVGKSyXwibcPq4BWmiaIGuG1icwxaQX6grC9VemZoJ8rg/132',
  })
}

const handleLogin = async () => {
  // const userProfile = await getUserProfile()
  const code = await getCode()
  const loginResult = await login(code)

  useStore.loginSuccess(loginResult.token)
}

onMounted(() => useStore.openLoginPage())
onUnmounted(() => useStore.exitLoginPage())
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.main {
  padding: 0 79px;
  padding-top: 63px;
  text-align: center;

  .logo {
    image {
      width: 120px;
      height: 120px;
    }
  }

  .app-name {
    font-size: 23px;
    margin-top: 20px;
  }

  .tips {
    color: #3f2311;
    margin-top: 33px;
    font-size: 12px;
  }
}

.bind-mobile {
  .app-popup-content {
    width: 100%;
    margin: 0 40px;
    padding: 30px;
    border-radius: 5px;
    text-align: center;

    .icon {
      margin-bottom: 25px;

      image {
        width: 130px;
        height: 146px;
      }
    }

    .title {
      margin-bottom: 25px;
      font-size: 17px;
      font-weight: 500;
      //   color: #291104;
    }

    .btn-bind-mobile {
      height: 43px;
      font-size: 12px;
      line-height: 43px;
      //   color: #663407;
    }
  }
}

.footer {
  margin-top: 135px;

  .btn {
    width: 100%;
    height: 43px;
    border-radius: 9px;
    margin: 0 auto;
    display: block;
    line-height: 43px;
    text-align: center;
    color: #4a280f;
    text-decoration: none;
    font-size: 12px;
  }

  .btn-back {
    border: 1px solid #979797;
  }

  .btn-login {
    background: var(--primary);
    margin-bottom: 15px;
  }
}
</style>
